﻿@model List<Niunan.VideoSys.Model.Videomx>
@{
    ViewBag.Title = "视频播放页 - 牛腩视频播放管理系统";
    string videoarr = "";
    string html5arr = "";
}
<style>
    .show_ul {
        list-style: none;
    }

        .show_ul li {
            margin: 5px;
        }

    #a1 {
        position: relative;
        z-index: 100;
        width: 600px;
        height: 400px;
        float: left;
    }

    .left_cur {
        font-weight: bold;
        color: orangered;
    }
</style>
<h2>@ViewBag.title</h2>
<div>
    @ViewBag.body
</div>
<div class="row" style="margin:20px 0;">
    <div class="col-sm-3">
        <ul class="show_ul">
            @for (int i = 0; i < Model.Count; i++)
            {
                Niunan.VideoSys.Model.Videomx item = Model[i];
                videoarr += $"videoarr.push('{item.videopath}');";
                html5arr += $"html5arr.push(['{item.videopath}->video/mp4']);";
                if (i == 0)
                {
                    <li>
                        <a href="javascript:playvideo(0)" class="left_cur">@item.title</a>
                    </li>
                }
                else
                {
                    <li>
                        <a href="javascript:playvideo(@i)">@item.title</a>
                    </li>
                }
            }

        </ul>
    </div>
    <div class="col-sm-9" style="border-left:1px solid #ccc;">
        <div id="a1"></div>
    </div>
</div>

<script type="text/javascript" src="/content/ckplayer/ckplayer.js" charset="UTF-8"></script>
 
<script>
    var videoarr = new Array();//新建一个数组来存flash端视频地址，添加方法就像下面一样
 @Html.Raw(videoarr)


    var html5arr = new Array();//新建一个数组来保存HTML5端用到的视频地址，注意，因为本演示只有一种mp4文件，所以html5下所有用到的视频地址都是相同的，请见谅，另外，该数组是一个二维数组
    @Html.Raw(html5arr)

    var index = 0; //下标为0，第一集


    //var params = { bgcolor: '#FFF', allowFullScreen: true, allowScriptAccess: 'always' };//这里定义播放器的其它参数如背景色（跟flashvars中的b不同），是否支持全屏，是否支持交互

    //function loadedHandler() {
    //    if (CKobject.getObjectById('ckplayer_a1').getType()) {//说明使用html5播放器
    //        //CKobject.getObjectById('ckplayer_a1').addListener('play', playHandler);
    //        //CKobject.getObjectById('ckplayer_a1').addListener('pause', pauseHandler);
    //        console.log('使用HTML5播放器');
    //    }
    //    else {
    //        //CKobject.getObjectById('ckplayer_a1').addListener('play', 'playHandler');
    //        //CKobject.getObjectById('ckplayer_a1').addListener('pause', 'pauseHandler');
    //        console.log('使用FLASH播放器');
    //    }
    //}

    function playerstop() {
        //CKobject._K_('yytf').style.display = 'block';
        //CKobject._K_('yytf').className = 'yytf_1';
        //CKobject._K_('daojs').style.display = 'block';
        //CKobject._K_('djs').innerHTML = 15;
        //setTimeend();
        //alert('播放结束，正在播放结束广告');
        console.log('插入结束，应该跳下一集。');
        if (index >= videoarr.length) { return; }
        index++;
        playvideo(index);
    }



    //点击播放某集视频
    function playvideo(n) {
        $('.left_cur').removeClass('left_cur');
        $('.show_ul a').eq(n).addClass('left_cur');


        //var flashvars = {
        //    f: videoarr[n],//视频地址
        //    c: 0,//是否读取文本配置,0不是，1是
        //    e: 0,//视频结束后的动作，0是调用js函数，1是循环播放，2是暂停播放并且不调用广告，3是调用视频推荐列表的插件，4是清除视频流并调用js功能和1差不多，5是暂停播放并且调用暂停广告
        //    v: 80,//默认音量，0-100之间
        //    p: 1,//视频默认0是暂停，1是播放，2是不加载视频
        //    loaded: 'loadedHandler',//当播放器加载完成后发送该js函数loaded
        //};

        //CKobject.embed('/content/ckplayer/ckplayer.swf', 'a1', 'ckplayer_a1', '100%', '100%', false, flashvars, html5arr[n], params);

        //新版ckplayer
        var videoObject = {
            container: '#a1', //容器的ID或className
            flashplayer: true, //强制使用flashplayer
            advertisements: 'website:/upload/ad.json',
            video: [
                [videoarr[n], 'video/mp4', '中文标清', 0]
            ]//视频地址
        };
        var player = new ckplayer(videoObject);
    }


    //页面加载完后播放第0个视频
    playvideo(0);
</script>
